<template>
	<view class="g-weckit" @touchmove.stop.prevent="moveHandle">
		<g-mask :visible.sync="visible">
			<template slot="content">
				<view class="g-weckit-wrap" @click.self="clickWrap">
					<view class="g-weckit-box" :class="[weckitStatus && 'g-weckit-box-show']">
						<view class="g-weckit-box-head">
							<text class="close-btn" @click="closea">关闭</text>
							<text class="title">{{ title }}</text>
							<view><slot name="head-right"></slot></view>
						</view>
						<view class="g-weckit-box-content" ref="content">
								<slot/>
						</view>
						<view class="g-weckit-box-foot"><slot name="foot"></slot></view>
					</view>
				</view>
			</template>
		</g-mask>
	</view>
</template>

<script>
export default {
	name: 'g-weckit',
	data() {
		return {
			weckitStatus: false
		};
	},
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		title: {
			type:String,
			default: 'default'
		}
	},
	computed: {},
	methods: {
		moveHandle(){
			
		},
		clickWrap() {
			//点击外层的盒子，因mask里面做了定位处理，故外边重套了一层div
			this.hideWekict();
		},
		hideWekict() {
			this.$emit('update:visible', false);
		},
		closea() {
			this.hideWekict();
		}
	},
	watch: { 
		visible(n) {
			if (n) {
				setTimeout(() => {
					this.weckitStatus = true;
					//打开的回调
					this.$emit('open');
				}, 150);
			} else {
				this.weckitStatus = false;
				//关闭的回调
				this.$emit('close');
			}
		}
	},
	created() {}
};
</script>
<style scoped lang="scss">
@import '../../iconfont.css';
@import '../../theme.scss';
.g-weckit-wrap {
	display: flex;
	flex-direction: column-reverse;
	width: 100%;
	height: 100%;
}
.g-weckit-box {
	width: 100%;
	height: 90%;
	display: flex;
	flex-direction: column;
	background: #ffffff;
	overflow: hidden;
	border-radius: 16rpx 16rpx 0 0;
	transition: 0.2s linear;
	transform: translateY(100%);
	&-head {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 16rpx;
		.close-btn{
			color:$g-text-dark;
		}
		.title {
			position: fixed;
			left: 50%;
			font-size: 32rpx;
			font-weight: 600;
			color: $g-text-darker;
			transform: translateX(-50%);
		}
	}
	&-content {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: scroll;
	}
	&-foot{
		
	}
	&-content::-webkit-scrollbar {
	      /*滚动条整体样式*/
	      /* width: 10px; */
	      /*高宽分别对应横竖滚动条的尺寸*/
	      /* height: 1px; */
	      display: none;
	    }
	 
	   &-content::-webkit-scrollbar-thumb {
	      /*滚动条里面小方块*/
	      /* border-radius: 10px; */
	      /* box-shadow: inset 0 0 5px rgba(0, 0, 0, 0); */
	      /* background: #535353; */
	      display: none;
	    }
	 
	    &-content::-webkit-scrollbar-track {
	      /*滚动条里面轨道*/
	      /* box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); */
	      /* background: #ededed; */
	      background: rgba(0, 0, 0, 0);
	      display: none;
	    }
	&-show {
		transform: translateY(0);
	}
}
</style>
